<template>
  <view class="container">
    <view class="card">
      <view class="title">注册</view>

      <input class="input" type="text" placeholder="请输入用户名" v-model="username" />
      <input class="input" type="password" placeholder="请输入密码" v-model="password" />
      <input class="input" type="password" placeholder="请确认密码" v-model="confirmPwd" />
      <input class="input" type="text" placeholder="请输入昵称" v-model="nickname" />
      <input class="input" type="text" placeholder="请输入手机号" v-model="mobile" />
      <input class="input" type="text" placeholder="请输入邮箱" v-model="email" />

      <button class="btn" @click="register">注册</button>

      <view class="footer">
        <text class="hint">已有账号？</text>
        <navigator url="/pages/login/login" open-type="navigate">
          <text class="link">去登录</text>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "RegisterPage",
  data() {
    return {
      username: "",
      password: "",
      confirmPwd: "",
      nickname: "",
      mobile: "",
      email: ""
    };
  },
  methods: {
    register() {
      if (!this.username || !this.password || !this.confirmPwd || !this.nickname || !this.mobile || !this.email) {
        uni.showToast({ title: "请填写完整信息", icon: "none" });
        return;
      }
      if (this.password !== this.confirmPwd) {
        uni.showToast({ title: "两次密码不一致", icon: "none" });
        return;
      }

      uni.showLoading({ title: "注册中..." });

      uniCloud.callFunction({
        name: 'addUser',
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname,
          mobile: this.mobile,
          email: this.email
        },
        success: (res) => {
          uni.hideLoading();
          if (res.result.code === 0) {
            uni.showToast({ title: res.result.msg, icon: 'success' });
            setTimeout(() => {
              uni.navigateTo({ url: '/pages/login/login' });
            }, 1000);
          } else {
            uni.showToast({ title: res.result.msg, icon: 'none' });
          }
        },
        fail: (error) => {
          uni.hideLoading();
          console.error("注册失败 =>", error);
          uni.showToast({ title: '注册失败，请重试', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f5f5f5;
}

.card {
  width: 80%;
  padding: 40rpx 30rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.12);
  text-align: center;
}

.title {
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
  color: #333;
}

.input {
  width: 100%;
  height: 70rpx;
  margin-bottom: 22rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: left;
  background: #fff;
  box-sizing: border-box;
}

.btn {
  width: 100%;
  height: 70rpx;
  line-height: 70rpx;
  background: #5A9977;
  color: #fff;
  font-size: 30rpx;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.footer {
  margin-top: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}

.hint {
  color: #666;
}

.link {
  margin-left: 8rpx;
  color: #5A9977;
}
</style>
